<template>
     <el-divider content-position="left">
        <h2> 导航管理</h2>
    </el-divider>
    
    <!-- 表单组件 -->
    <el-form>
        <el-form-item>
            <el-input v-model="inputV" placeholder="请输入导航名称" style="width: 400px; height: 40px;" />
            <el-button @click="addNavFn" type="primary" :icon="Plus" style="margin-left: 10px; height: 36px;">新增</el-button>
        </el-form-item>
        <!-- <el-button type="primary" style="margin: 10px 0 ; height: 40px; display: block;">新增</el-button> -->
    </el-form>

    <!-- 表格组件 -->
    <el-table :data="tableData.arr" style="width: 100%">
        <el-table-column label="序号" width="180">
            <!-- 插槽 -->
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="名称" width="180">
            <template #default="scope">
                <!-- contenteditable="true" -->
                <div>{{ scope.row.nav_name }}</div>
            </template>
        </el-table-column>

        <el-table-column label="创建时间" width="300">
            <template #default="scope">
                <div>{{ scope.row.nav_create_time }}</div>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- “删除”对话框 -->
    <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
        <span>您确定要删除“{{ nav_name }}”导航吗?</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="removeNavFn">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- “修改”对话框 -->
    <el-dialog v-model="dialogFormVisible" title="修改导航">
        <el-form :model="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
                <!-- 数据双向绑定 -->
                <el-input v-model="form.nav_name" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="editNavFn">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
// 导入vue的API
import { ref, reactive } from 'vue'
// 导入element-plus组件
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
// 导入请求接口
import { listNavFunc, addNavFunc, removeNavFunc, editNavFunc } from '../../api/index'

// 记录输入框的值响应式对象
let inputV = ref('')
let nav_name = ref('')
let id: (string | number | undefined) = ''
// 控制对话框显示和隐藏
const dialogVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
    nav_name: ''
})
// 接口
interface INav {
    id?: number,
    nav_create_time: string
    nav_name: string
}

// 记录导航列表数据
const tableData: any = reactive({ arr: [] })

// 编写方法 获取导航列表
const initFn = async () => {
    await listNavFunc()
        .then(
            (content: any) => {
                // console.log('1.0', content)
                if (content.code == 200) {
                    // 赋值（产生响应式变化）
                    tableData.arr = [...content.result];
                }
            }
        )
}
initFn();

// 发布/添加导航
const addNavFn = async () => {
    // 判断输入框是否有值
    if (inputV.value == "") {
        // 提示
        ElMessage.error('输入框不能为空。')
        return;
    }
    // 调用后台接口 添加导航
    await addNavFunc({
        nav_name: inputV.value
    })
        .then(
            (content: any) => {
                if (content.code == 200) {
                    ElMessage.success(content.msg)
                    // 重新获取数据
                    initFn();
                    // 重置输入框
                    inputV.value = "";
                }
                else {
                    ElMessage.error(content.msg)
                }
            }
        )
        .catch(
            (err: any) => {
                ElMessage.error(err.msg);
            }
        )
}

// 编辑方法
// 点击“编辑”按钮
const handleEdit = (index: number, row: INav) => {
    // console.log(index, row)
    // 记录id
    id = row.id
    // 名称
    form.nav_name = row.nav_name
    // 显示表单对话框
    dialogFormVisible.value = true
}
// 点击“保存”按钮
const editNavFn = async ()=> {
    if(id){
        await editNavFunc({
            id,
            nav_name: form.nav_name
        })
        .then(
            (content: any) => {
                console.log('5.0',content)
                if (content.code == 200) {
                    ElMessage.success(content.msg)
                    // 重新获取数据
                    initFn();
                    // 重置输入框
                    inputV.value = "";
                    // 表单对话框隐藏
                    dialogFormVisible.value = false;
                }
                else {
                    ElMessage.error(content.msg)
                }
            }
        )
        .catch(
            (err: any) => {
                ElMessage.error(err.msg);
            }
        )
    }
}

// 点击“确定”按钮
const removeNavFn = async () => {
    if (id) {
        await removeNavFunc({ id })
            .then(
                (content: any) => {
                    if (content.code == 200) {
                        ElMessage.success(content.msg);
                        // 重新获取数据
                        initFn();
                        // 重置输入框
                        inputV.value = "";
                        // 关闭对话框
                        dialogVisible.value = false;
                    }
                    else {
                        ElMessage.error(content.msg);
                    }
                }
            )
            .catch(
                (err: any) => {
                    ElMessage.error(err.msg);
                }
            )
    }
}
// 点击“删除”按钮
const handleDelete = (index: number, row: INav) => {
    // console.log(index, row)
    // 获取id和index
    id = row.id
    nav_name.value = row.nav_name
    // 显示对话框
    dialogVisible.value = true;
}
// 关闭对话框
const handleClose = (done: () => void) => {
    // 关闭对话框
    dialogVisible.value = false;
    //   ElMessageBox.confirm('Are you sure to close this dialog?')
    //     .then(() => {
    //       done()
    //     })
    //     .catch(() => {
    //       // catch error
    //     })
}


</script>